<template>
    <div class="container">
      <div class="right">
        <div class="topp">
            <img style="width:160px;height:160px" :src="data.img" alt="" >
         
            <div>
<div>{{data.title}}</div>
<div style="color:#36d;font-size:18px">{{data.uname}} 
<span style="color:gray;margin-left:10px;font-size:16px">{{data.create_time.split("T")[0]}}创建</span>

</div>
<div style="font-size:18px;margin-top:10px;margin-bottom:10px">
    标签:
    <span class="biaoqian" v-for="v in data.biaoqian.split(',')">{{v}}</span>
</div>
<div style="font-size:18px">介绍:{{data.desc}}</div>

                
            </div>
            
        </div>
        <div class="r2">
          <div>
              <span>歌曲列表</span>
            <span>{{ data.list.length }}首歌</span>
          </div>
          <div>
            已播放{{data.num}}次
          </div>
        </div>
        <el-table stripe
      :data="data.list"
      style="width: 100%">
      <el-table-column align="center"
        prop="date"
        label=""
        width="60">
        <template slot-scope="scope">
            {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="标题" align="center"
       >
       <template slot-scope="scope">
<div class="tab" @click="playG(scope.row.id)">
    <i class="el-icon-video-play"></i>
{{ scope.row.name }}
</div>
       </template>
      </el-table-column>
      <el-table-column
        prop="gname" align="center"
        label="歌手">
      </el-table-column>
      <el-table-column
        prop="cname" align="center"
        label="分类"> 
      </el-table-column>
        <el-table-column
        prop="num" align="center"
        label="已播放(次)"> 
      </el-table-column>
    </el-table>
      </div>
    </div>
</template>

<script>
import api from "@/api/index"
    export default {
        data() {
            return {
                data:{},

            }
        },
      
        methods: {
            playG(id){
       this.$router.push("/xiangqing?id="+id)
    }
        },
        mounted(){
            api.getData({
                id:this.$route.query.id,
            }).then(res=>{
                this.data=res.data
            })
        }
       
    }
</script>

<style lang="scss" scoped>
    .tab{
        cursor: pointer;
        display: inline-block;
        box-sizing: border-box;
        &:hover{
            border-bottom: 1px solid #000;
        }
    }
.container{
    background-color: #fff;
    border: 1px solid #ddd;
    display: flex;
    .right{
        flex: 1;
        padding: 60px 50px  50px 50px;
        .topp{
            display: flex;
            .biaoqian{
                margin-right: 20px;
                background-color: #ddd;
                color: white;
                padding: 0 10px;
                border-radius: 6px;


            }
            div{
                font-size: 26px;
                margin-left: 20px;
                // padding-top: 20px;
            }
        }
        .r2{
            width: 100%;
            margin-top: 40px;
            padding-bottom: 10px;
            display: flex;
            border-bottom: 4px solid rgb(199, 12, 12);;
            font-size: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            >div:nth-child(1){
 >span:nth-child(2){
                margin-left: 20px;
                font-size: 14px;
                color: #666;
            }
          
            }  >div:nth-child(2){
                font-size: 18px;
                 color: #666;
            }
           
        }
    }
    .left{
        width: 260px;
        border-right: 1px solid #ddd;
        
        padding-top: 60px;
      
        .title{
            padding:0 20px;
            margin-bottom: 20px;
            font-weight: bold;
            font-size: 16px;
        }
        .item{
            display: flex;
            cursor: pointer;
            // margin-top: 20px;
            padding:10px 20px;
            height: 80px;
          
            div{
                margin-left: 10px;
                font-size: 20px;
            }
            &:hover{
                background-color: rgb(236,236,236)
            }
            &.cur{
                background-color: rgb(230,230,230);
            }
        }
    }
}
</style>